<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>login</title>
  <style>
    :root {
      font-size: 15px;
    }

    body {
      margin: 0;
      font-family: Helvetica;
      background-color: #29f1c3;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .row {
      width: 400px;
      margin: .6rem 0;
      position: relative;
    }

    .row input {
      font-size: 1rem;
      border: 1px solid #03c9a9;
      border-radius: 4px;
      margin: 0;
      padding: .8rem 1rem;
      box-shadow: 0px 1px 2px rgba(0, 0, 0.25);
      width: 100%;
      box-sizing: border-box;
      color: #3e3131;
      outline: none;
      transition: all ease-in-out .2s;
    }

    .row label {
      position: absolute;
      left: 1rem;
      top: .8rem;
      color: #ccc;
      transition: all ease-in-out .2s;
      cursor: text;
    }

    h2 {
      font-size: 2rem;
      letter-spacing: .1rem;
      margin-bottom: 2rem;
    }

    .row input:focus {
      border: 1px solid #1ba39c;
    }

    .row input:focus+label {
      transform: translateX(calc(-100% - 2.5rem));
      color: #2e3131;
    }

    /* placeholder-shown表示placeHolder显示的样子not为不显示的样子 */
    /* 下面的选择器表示，没有聚焦且不显示placeholder ，label要如何显示 */
    input:not(:focus):not(:placeholder-shown)+label {

      /* color: rgba(0, 0, 0, 0) */
      /* 这里表示透明色  rgba 0000也可以表示透明*/
      color: transparent;
    }

    .row button {
      background: none;
      border: none;
      position: absolute;
      top: calc(50% + 1px);
      transform: translateY(-50%);
      right: calc(.5rem + 1px);
      margin: 0;
      padding: 0;
      outline: none;
      display: none;
    }

    .row input[type="password"]:not(:placeholder-shown)~button {
      display: inline-block;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <h2>會員登入</h2>
  <div class="row">
    <input type="text" id="username" placeholder=" ">
    <label for="username">用戶名稱</label>
  </div>
  <div class="row">
    <input type="password" id="password" placeholder=" ">
    <label for="password">密碼</label>
    <button>
      <svg width="24px" height="24px" viewBox="0 0 180 180" version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="Artboard">
            <g id="Group">
              <circle id="Oval" stroke="#2E3131" stroke-width="15" cx="90" cy="90" r="82.5"></circle>
              <polygon id="Triangle" fill="#2E3131"
                transform="translate(98.000000, 90.000000) rotate(90.000000) translate(-98.000000, -90.000000) "
                points="98 62 140 118 56 118"></polygon>
            </g>
          </g>
        </g>
      </svg>
    </button>
  </div>

</body>

</html>